<script lang="ts" name="Login_Register" setup>

import "@/style/Login_Register.css"
import {CircleCheckFilled, View, Hide, EditPen} from "@element-plus/icons-vue";
import * as login from '@/static/Login_Register/login'
import {lo_pwdVisible, lo_eyeVisible, userLogin} from "@/static/Login_Register/login";
import * as register from '@/static/Login_Register/register'
import {re_eyeVisible, phoneIcon, pwdIcon, re_pwdVisible, userRegister} from '@/static/Login_Register/register'
import { mySwitch, preRef, formRef } from '@/static/Login_Register/slide'
import {countdown, messageCodeVis, sendCode} from "@/static/utils/send_code";
import {changePassword, forgetForm, isResetPassword} from "@/static/Login_Register/Reset_pwd";
import * as code from "@/static/utils/send_code";


const handleLogin = userLogin()  // 登录跳转
const handleRegister = userRegister()  // 注册后刷新页面

</script>

<template>
  <div class="all">
    <div class="box">
      <!-- 注册 -->
      <div class="register-box">
        <form autocomplete="off" @submit.prevent="handleRegister" style="border-radius: 8px 0 0 8px; inset: 2px 0 2px 2px">
          <h2>注册</h2>
          <div class="inputBox" >
            <input type="text" required title="_输入您的电话号码_" @blur="register.check_telephone" v-model="register.registerForm.telephone">
            <span>Telephone-Num</span>
            <el-icon class="check" v-show="phoneIcon" color="green"><CircleCheckFilled /></el-icon>
            <p></p>
          </div>
          <div class="inputBox">
            <input :type="re_pwdVisible?'text':'password'" required title="_以字母开头，长度在6~18之间，只能包含字母、数字和特殊字符 _.*#/" @focus="register.eyeSwitch" @blur="register.check_pwd" v-model="register.registerForm.password" autocomplete="off">
            <a v-show="re_eyeVisible || register.registerForm.password.length > 0">
              <el-icon class="pwdView" @click="register.pwdSwitch" v-if="re_pwdVisible == true" color="green"><View /></el-icon>
              <el-icon class="pwdView" @click="register.pwdSwitch" v-else color="green"><Hide /></el-icon>
            </a>
            <span>Password</span>
            <el-icon class="check" v-show="pwdIcon" color="green"><CircleCheckFilled /></el-icon>
            <p></p>
          </div>
          <div class="inputBox">
            <input type="text" required title="_请输入手机验证码_" @blur="register.check_code" v-model="register.registerForm.code">
            <span>Verification-Code</span>
            <el-button id="sendCode" @click="sendCode('register')" :disabled="messageCodeVis" type="primary" color='#45f3ff'>
              <span v-if="countdown > 0">{{ `${countdown} s` }}</span>
              <span v-else-if="countdown == 0">点击获取</span>
            </el-button>
            <p></p>
          </div>
          <div class="links">
            <a @click="mySwitch">已有账号？去登录 >></a>
          </div>
          <input type="submit" value="Register">
        </form>
      </div>

      <!-- 登录 -->
      <div class="login-box">
        <form @submit.prevent="handleLogin" style="border-radius: 0 8px 8px 0; inset: 2px 2px 2px 0">
          <h2>登录</h2>
          <div class="inputBox" >
            <input type="text" v-model="login.loginForm.user" title="_输入用户名或手机号_" @blur="login.check_user" required>
            <span>Telephone/UserName</span>
            <p></p>
          </div>
          <div class="inputBox">
            <input :type="lo_pwdVisible?'text':'password'" v-model="login.loginForm.password" title="_请输入密码_" @focus="login.eyeSwitch" @blur="login.check_pwd" autocomplete="off" required>
            <a v-show="lo_eyeVisible || login.loginForm.password.length > 0">
              <el-icon class="pwdView" @click="login.pwdSwitch" v-if="lo_pwdVisible == true" color="green"><View /></el-icon>
              <el-icon class="pwdView" @click="login.pwdSwitch" v-else color="green"><Hide /></el-icon>
            </a>
            <span>Password</span>
            <p></p>
          </div>
          <div class="links">
            <a @click="mySwitch">没有账号？去注册！</a>
          </div>
          <div class="btm-box">
            <input type="submit" value="Login">
<!--            <RouterLink to="#">Forget Password ?</RouterLink>-->
            <el-button
                class="btm-box-button"
                size="small"
                :disabled="messageCodeVis"
                text
                @click="isResetPassword = true">
              <span v-if="code.countdown.value > 0">{{ `${code.countdown.value} s` }}</span>
              <span v-else style="margin-top: 10px">Forget Password ?</span>
            </el-button>
          </div>
        </form>
      </div>

      <div class="pre-box" ref="preRef">
        <form ref="formRef" autocomplete="off" style="border-radius: 8px 0 0 8px">
          <h1>Network Security</h1>
          <div style="height: 2px; width: 200px; background: rgba(14,250,167,0.6); position: absolute; left:100px; top: 105px"></div>
          <a style="text-align: center; margin: 10px 0 -15px 0; color: #c3c3c3">Practice Platform</a>
          <img src="public/logo-1.png" alt="" style="user-select: none;">
        </form>
      </div>

      <el-dialog
          v-model="isResetPassword"
          width="380"
          align-center
          :style="{ backgroundColor: '#282828' }"
      >
        <template #header>
          <div style="color: #fff; font-size: 20px;">修改密码</div>
        </template>

        <el-form-item>
          <span>手机号：</span>
          <el-input v-model="forgetForm.telephone"
                    style="width: 210px;"
                    :prefix-icon="EditPen"
                    class="custom-color-input"
                    size="large"
                    maxlength="11"
                    clearable
          />
        </el-form-item>

        <el-form-item>
          <p>新密码：</p>
          <el-input v-model="forgetForm.password"
                    style="width: 210px;"
                    :prefix-icon="EditPen"
                    class="custom-color-input"
                    size="large"
                    maxlength="18"
                    show-password
                    clearable
          />

        </el-form-item>

        <el-form-item>
          <span>验证码：</span>
          <el-input v-model="forgetForm.code"
                    style="width: 130px;"
                    :prefix-icon="EditPen"
                    class="custom-color-input"
                    size="large"
                    maxlength="4"
                    clearable
          />
          <el-button
              size="default"
              :disabled="messageCodeVis"
              :type="'success'"
              text
              @click="sendCode('reset_pwd')">
            <span style="margin: 10px auto auto 20px; font-size: 18px" v-if="countdown > 0">{{ `${countdown} s` }}</span>
            <span v-else-if="countdown == 0" style="margin-top: 10px">发送验证码</span>
          </el-button>
        </el-form-item>
        <span style="color: #65e0c2;">Tips：密码格式——以字母开头，长度在6~18之间，只能包含字母、数字和特殊字符 _.*#/</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary"
                       @click="changePassword">
              提交修改
            </el-button>
          </div>
        </template>
      </el-dialog>

      <div class="border-center"></div>
    </div>
    <a style="user-select: none;">Copyright ©2024 JachinYang</a>
  </div>
</template>
